<template>
	<div class="param">
		<v-card style="width:100%; margin-top:20px;">
			<v-card-title>
				Query Params
			</v-card-title>
			<v-simple-table id="tab">
				<template v-slot:default>
					<thead>
						<!--  表头 -->
						<tr>
							<th class="text-left">Key</th>
							<th class="text-left">Value</th>
							<th class="text-left">Description</th>
						</tr>
					</thead>
					<tbody>
						<!-- 表格内容 -->
						<tr v-for="item in desserts" :key="item.id">
							<td>
								<v-text-field v-model="item.Key" :readonly="item.readonly" autofocus></v-text-field>
							</td>
							<td>
								<v-text-field v-model="item.Value" :readonly="item.readonly" autofocus></v-text-field>
							</td>
							<td>
								<v-text-field v-model="item.Description" :readonly="item.readonly" autofocus>
								</v-text-field>
							</td>
							<template>
								<!-- 按钮区域 -->
								<td>
									<!-- 非修改界面显示修改，修改界面显示保存 -->
									<v-btn rounded color="primary" dark @click="editItem(item)" small
										style="margin-right: 15px;">{{ item.readonly? "修改":"保存" }}</v-btn>
									<!-- 非修改界面显示删除 -->
		 						<v-btn rounded color="error" dark small v-if="item.readonly" @click="delItem(item)">
										删除</v-btn>
									<!-- 修改界面显示取消 -->
									<v-btn rounded color="success" dark small v-if="!item.readonly"
										@click="cancelItem(item)">取消</v-btn>
								</td>
							</template>
						</tr>
					</tbody>
				</template>
			</v-simple-table>
		</v-card>
		<span>response</span>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-input type="textarea" :rows="5" v-model="response" class="textarea"></el-input>
			</el-col>
		</el-row>
	</div>
</template>

<script lang="ts">
	import axios from "axios";
	import vuetify from "vuetify";

	export default {
		inject: ["reload"],
		name: "Param",
		components: {},
		data() {
			return {
				// 表格数据
				response:'',
				desserts: [{
						id: 1,
						Key: '',
						Value: '',
						Description: '',
						readonly: true
					},
					{
						id: 2,
						Key: '',
						Value: '',
						Description: '',
						readonly: true
					},
					{
						id: 3,
						Key: '',
						Value: '',
						Description: '',
						readonly: true
					},
				],
				editedItem: {
					id: 0,
					Key: '',
					Value: '',
					Description: '',
					readonly: true
				},
				editedIndex: -1,
		 }
		},
		methods: {
			// 修改数据（保存数据）
			editItem(item) {
				this.editedIndex = this.desserts.indexOf(item); //先找到desserts数组里面对应的索引，通俗点说就是确定修改哪一行数据
				this.editedItem = Object.assign({}, item); //把未修改之前的值存到editedItem对象里面，方便用户取消修改
				//以上两行主要是为取消修改服务，要实现修改其实只需下面一行就够了，因为html中本身的标签为<v-text-field>,也就是说只需控制它的只读和非只读来回切换即可做到修改保存
				item.readonly = !item.readonly;
			},
			// 删除数据
			delItem(item) {
				const index = this.desserts.indexOf(item); //找到desserts数组里面对应的索引，通俗点说就是确定删除哪一行数据
				confirm('Are you sure you want to delete this item?') && this.desserts.splice(index,
				1); //系统弹出确认框，点击确定就是删除这一行数据
			},
			// 取消
			cancelItem(item) {
				item.readonly = !item.readonly; //切换文本框的读写状态
				this.$nextTick(() => {
					Object.assign(this.desserts[this.editedIndex], this
					.editedItem); //点击取消之后，把未修改之前的数据还原到desserts数组
					this.editedIndex = -1; //把索引标志置空
				})
			},
		}

	};
</script>
<style lang="less" scoped>
	span{
		font-size:20px;
		line-height: 50px;
	}
	.textarea{
		width:950px;
		height:40px;
	}
</style>
